import styles from "./index.module.less";
import { Card, Title } from "@/pages/insure/components/index.js";
import { Agreement } from "@/components/agreement/index.jsx";
import { insureAgreementList } from "@/contstants.js";
import { ArticlePopup } from "@/components/article-popup/index.jsx";
import { useRef } from "react";

export const PaymentMethod = () => {
  const articlePopupRef = useRef(null);
  return (
    <Card className={styles.container}>
      <Title
        extra={
          <>
            查看
            <span onClick={() => articlePopupRef.current.open()}>
              完整费率表
            </span>
          </>
        }
      >
        缴费方式
      </Title>
      <div className={styles.list}>
        <div className={"item"}>
          <div className={"value"}>每期保费（12期）</div>
          <div className={"label"}>
            <span>预估0.6</span>
            元/月
          </div>
        </div>
      </div>

      <Agreement data={insureAgreementList} />
      <ArticlePopup ref={articlePopupRef} article={insureAgreementList[4]} />
    </Card>
  );
};
